<template>
  <div class="login">
    <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
      <FormItem prop="userName">
        <Input v-model="form.userName" placeholder="请输入用户名">
          <span slot="prepend">
            <Icon :size="16" type="ios-person"></Icon>
          </span>
        </Input>
      </FormItem>
      <FormItem prop="password">
        <Input type="password" v-model="form.password" placeholder="请输入密码">
          <span slot="prepend">
            <Icon :size="14" type="md-lock"></Icon>
          </span>
        </Input>
      </FormItem>
      <FormItem>
        <Button @click="handleSubmit" type="primary" long>登录</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: 'LoginForm',
  data() {
    return {
      token: 'zhihuiketang',
      form: {
        userName: 'super_admin',
        password: ''
      },
      rules: {
        user: [
          {
            required: true,
            message: 'Please fill in the user name',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: 'Please fill in the password.',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: 'The password length cannot be less than 6 bits',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          console.log(this.$routes)
          this.$router.replace({ path: '/home' })
          this.$cookie.set('token', this.token)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('../../assets/img/bg.jpg') no-repeat center center;
  background-size: 100% 100%;
  .ivu-form {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 180px;
    margin-left: -150px;
    margin-top: -90px;
  }
}
</style>